<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>																			
<%@ include file="/WEB-INF/view/jsp/base.jsp" %>																																			
<html lang="en">
<style>
.gradeA{
	cursor:pointer!important;
}
.widget-box tr td {
    text-align: left;
}
.mytable{
	border:1px solid #ddd;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
}
.mytable th{
   border:0px solid #ddd;
   padding:8px;
}
.mytable tr{
   border:1px solid #ddd;
}
.mytable td{
   padding:8px;
   text-align:left;
}

.text140 {
	width:140px;
	height: 40px;
	text-align: left;
}
.textarea100{
 	width:100px;
}
.textarea200{
	width:200px;
}
.textarea350{
	width:350px;
}


</style>
<body>																																														
	<div id="content">																																										
		<div id="content-header"></div>																																						
		<div class="container-fluid">																																							
			<div>																																							
				<div>																																					
					<h5>节点-交易码关系配置</h5>
			    </div>
   				<form id="projMgrQueryForm" action="" method="post"
					class="form-horizontal">
					<div class+"" style="font-size: 15px; padding: 15px 5px 5px 5px;">
						<label style="display: inline">项目名：</label> 
						<input primaryKey="true" type="text" class="text140" name="project" onkeydown="enterQuery()"  size="16"  maxlength="32" > 
						&nbsp;&nbsp;&nbsp;
						<label style="display: inline">服务节点:</label> 
						<input type="text" class="text140"	name="server_nodes" onkeydown="enterQuery()"  size="128"  maxlength="256" >
						&nbsp;&nbsp;&nbsp;
						<label style="display: inline">客户端节点:</label>
						<input type="text" class="text140" name="client_nodes" onkeydown="enterQuery()"   size="128"  maxlength="256">
						&nbsp;&nbsp;&nbsp;
						<label style="display: inline">交易码：</label> 
						<input primaryKey="true" type="text" class="text140" name="apps" onkeydown="enterQuery()"  size="4096"  maxlength="8192" > 
						&nbsp;&nbsp;&nbsp;
						<button id="filter" type="button" class="btn btn-info"
							style="margin-bottom: 5px; padding: 2px 5px;" onclick="query()">&nbsp;&nbsp;&nbsp;过&nbsp;滤&nbsp;&nbsp;&nbsp;</button>
					</div>
				</form>																																											
				<table id="projMgrTable" url="" class="mytable ">																	
					<thead>																																									
						<tr role="row">							    																																				
							<th class="ui-state-default" role="columnheader"  style="" name="project" primaryKey="true" >项目名</th> 										
							<th class="ui-state-default" role="columnheader"  style="" name="server_nodes">服务节点</th> 										
							<th class="ui-state-default" role="columnheader"  style="" name="client_nodes" >客户端节点</th>
							<th class="ui-state-default" role="columnheader"  style="" name="apps" >交易码</th>							
							<th class="ui-state-default" role="columnheader"  style="" name="work-box" >操作
								<a href="#" onclick="addNewRow()">&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-plus"></span></a>&nbsp;&nbsp;&nbsp;&nbsp;
							</th>						 															
						</tr>

						<tr id="editRow" role="row" style="display: none;">	
  							<td><textarea readonly class="textarea100" style="overflow-x:visible; overflow-y:visible;" contenteditable="false"  name="project" maxlength="32"></textarea></td>	
							<td><textarea class="textarea350" style="overflow-x:visible; overflow-y:visible;"  contenteditable="true" name="server_nodes" maxlength="256"></textarea></td>
							<td><textarea class="textarea200" style="overflow-x:visible; overflow-y:visible;"   contenteditable="true" name="client_nodes" maxlength="256"></textarea></td>
							<td><textarea class="textarea200" style="overflow-x:visible; overflow-y:visible;"   contenteditable="true" name="apps" maxlength="8192"></textarea></td>
							<td class="center ">
								<a href="#" onclick="saveEdit($(this))"><span class="glyphicon glyphicon-saved"></span></a>
								 &nbsp;&nbsp;&nbsp;&nbsp;
								 <a	href="#" onclick="query()"><span class="glyphicon glyphicon-remove"></span></a>
							</td>  
						</tr>	
						<tr id="addRow" role="row"  style="display: none;">
							<td><textarea class="textarea100" style="overflow-x:visible; overflow-y:visible;"  contenteditable="false" name="project" maxlength="32"></textarea></td>
							<td><textarea class="textarea350" style="overflow-x:visible; overflow-y:visible;"  contenteditable="true" name="server_nodes" maxlength="256"></textarea></td>
							<td><textarea class="textarea200" style="overflow-x:visible; overflow-y:visible;"  contenteditable="true" name="client_nodes" maxlength="256"></textarea></td>
							<td><textarea class="textarea200" style="overflow-x:visible; overflow-y:visible;"  contenteditable="true" name="apps" maxlength="8192"></textarea></td>
							<td class="center ">
								<a href="#" onclick="saveAdd($(this))""><span class="glyphicon glyphicon-saved"></span></a>&nbsp;&nbsp;&nbsp;&nbsp;
								<a href="#" onclick="rmRow($(this))"><span class="glyphicon glyphicon-remove"></span></a>
							</td>
						</tr>																																							
					</thead>																																								
					<tbody id="projMgrTable-tbody" role="alert" aria-live="polite" aria-relevant="all">																										
					</tbody>																																						
				</table>
					<p id="errorInfo" style="display: none; color:red; font-size:10px; " ></p>
				<div style="float: left;">
					<span style="width: 70px; height: 40px; margin: 2px 0 0 4px;">每页</span>
					<select id="pageSize" style="width: 65px; height: 26px; margin: 2px 0 0 4px;" onchange="query()">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="5">5</option>
						<option value="10" selected="true">10</option>
					</select> <span style="width: 65px; height: 30px;">条</span>
				</div>
				<div id="_paging" style="float: right; margin: 2px 5px 2px 4px;"
					class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full_numbers">
				</div>																																									
			</div>																																												
		</div>	
																																												
	</div>
	<div id="modelDialog" class="modal fade"
		style="display: block; height: 180px;">
		<div class="modal-header">
			<a class="close" data-dismiss="modal">x</a>
			<h4>操作提示</h4>
		</div>
		<div class="modal-body">
			<h4>确认删除该项记录吗？</h4>
		</div>
		<div class="modal-footer">
			<button id="confirm" type="button" class="btn btn-success">确认</button>
			<button type="button" class="btn btn-info" data-dismiss="modal">取消</button>

		</div>
	</div>																																													
</body>																																														
<script type="text/javascript">																																						
$(document).ready(function(){
	query();
})	

function query(){
	removeErrInfo();
	$("#projMgrQueryForm").attr("action","<%=path%>/projMgr/getProjList")
	$("#projMgrQueryForm").ajaxSubmit(function(text){																															
	    if(text.success){																																								
	    	var _data = text.data;
			var _ths = [];      //标题行
			var _primaryKey = [] ;  //唯一索引字段				
			$("#projMgrTable").find("thead tr th").each(function(){
				var $this = $(this) ;
				_ths.push($this.attr("name"));
				if($this.attr("primaryKey")=="true"){
					_primaryKey.push($this.attr("name")) ;
				}
			});
			
 		    var pageSize = $("#pageSize").val();
			var tbody = loadData(_data,_ths,_primaryKey, pageSize);
			var $tby = $("#projMgrTable-tbody");
			$tby.html(tbody);
		}
	});
}

function loadData(data,_ths,_primaryKey, pageSize){
	var tbody = "";
 	var loopTimes;
	if(pageSize<=data.length){
		loopTimes=pageSize;
	}else{
		loopTimes=data.length;
	}
	for(var i=0;i<loopTimes;i++){
		var tr = '<tr class="gradeA ">';
		for(var index in _ths){
							if(_ths[index]!="work-box"){
								var td_text = ((data[i][_ths[index]]==null)?"":data[i][_ths[index]]);
								tr+='<td class=" " name = "'+ _ths[index]+'">' + td_text +'</td>';
							}else if(_ths[index]=="work-box"){
								tr+='<td class="center" name= "'+ _ths[index]+'">'
								tr+='<a href="#" onclick="edit($(this))"><span class="glyphicon glyphicon-pencil"></span></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="deleteProj($(this))"><span><span class="glyphicon glyphicon-remove"></span></span></a>';
								tr+='<form action="" method="post">';
								for(var key in _primaryKey){
									tr+='<input type="hidden" name="'+ _primaryKey[key] +'" value="'+ data[i][_primaryKey[key]] +'"/>';
								}
								tr+='</form>';
								tr+='</td>';
							}
						}
				 '</tr>' ;
		 tbody+=tr;	 
	}
	return tbody ;
}

function enterQuery(){
	var event = window.event || arguments.callee.caller.arguments[0];
	if(event.keyCode == 13){
		query();
	}
}

//点击编辑按钮，数据被克隆到编辑框
function edit(_this){
	var copytr=$("#editRow");//可编辑行
	var this_tr = _this.parent().parent();//当前行
	console.log(this_tr);
	var tr_data = {};//用于存当前行显示数据
	this_tr.find("td").each(function(){//将当前数据封装成json格式
		tr_data[$(this).attr("name")] = $(this).text();
	});
	console.log(tr_data);
 	this_tr.html(copytr.html());//当前行内容替换成可编辑行内容
 		this_tr.find("textarea").each(function(){//用前面封装好的数据填充当前行
 			
 		var _this = $(this);

		var td_name = _this.attr("name");
		if(td_name){
			_this.text(tr_data[td_name]);
/* 			console.log('*************************************');
	 		console.log(_this);
	 		autoTextarea(_this); */
		}
 
	}); 		
}

	//删除记录																																											
	function deleteProj(_this){																																							
		$("#modelDialog").modal();
	    $("#confirm").unbind('click').click(function(){	
			var $this = $(this);
			var form = _this.siblings("form");																																		
			var _tr = _this.parent().parent();																																			
			var sib = _tr.siblings("tr").length;
			
			//关闭弹出框
			$this.siblings('[data-dismiss="modal"]').trigger('click');
			
	 		$.ajax({																																								
	 				url:"<%=path%>/projMgr/deleteProj",																																		
	 				data:form.serialize(),																																				
	 				type:"post",																																						
	 				success:function(text){																																				
							query();																																
	 				}																																									
	 		});																																										
		})	
	} 
	
	//保存编辑后的结果
 	function saveEdit(_this){
        var $form = $("<form action='' method='post'></form>");	//动态创建一个form表单用来收集数据
		var this_tr = _this.parent().parent();  //获取当前行数据
    	$form.html(this_tr.children().clone(true));  //将当前tr里面的全部内容clone(包含数据)赋予form对象
       console.log($form.serialize());
    	$.ajax({
			url:"<%=path%>/projMgr/updateProj",	
			type:"post",
			data:$form.serialize(),
			success:function(result){
				query();
			}
		});
	} 
	
	//保存增加的记录																																									
	function saveAdd(_this){																																										
		var $form = $("<form action='' method='post'></form>");	//动态创建一个form表单用来收集数据
		var this_tr = _this.parent().parent();  //获取当前行数据	
		$form.html(this_tr.children().clone(true));  //将当前tr里面的全部内容clone(包含数据)赋予form对象
		var flag = 0;
		flag =check(this_tr);
		if(flag==-1){
			return;
		}
		
		//保存																																												
        $.ajax({
			url:"<%=path%>/projMgr/addProj",	
			type:"post",
			data:$form.serialize(),
			success:function(result){
				query();
			}
		});
	}
	
	//点击增加按钮，编辑增加内容
	function  addNewRow(){
		var newRow = $("<tr  role='row' >"+$("#addRow").html()+"</tr>");
		$("#projMgrTable-tbody").append(newRow);
	}

	//点击取消增加
	function rmRow(_this){
		removeErrInfo();
		_this.parent().parent().remove();
	}
	
	/**
	 *文本框根据输入内容自适应高度
	 *@param {HTMLElemnt} 输入框元素
	 *@param {Number} 设置光标与输入框保持的距离(默认0)
	 *@param {Number} 设置最大高度(可选)
	*/
	
	var autoTextarea = function(elem, extra, maxHeight){
		extra = extra || 0;
		var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
		isOpen = !!window.opera && !!window.opera.toString().indexOf('Opera'),
		addEvent = function(type, callback){
			elem.addEventListener?
					elem.addEventListener(type, callback, false):
					elem.attachEvent('on'+type.callback);
					
		},
		getStyle = elem.currentStyle?function(name){
			var val = elem.currentStyle[name];
			if(name ==='height' && val.search(/px/i)!==1){
				var rect = elem.getBoundingClientRect();
				return rect.botto - rect.top - parseFloat(getStyle('paddingTop')) - 
				parseFloat(getStyle('paddingBottom')) +'px';
			};
			return val;
		}:function(name){
			return getComputedStyle(elem, null)[name];
		},
		minHeight = parseFloat(getStyle('height'));
		elem.style.resize='none';
		
		var change = function(){
			var scrollTop,height,
				padding = 0,
				style = elem.style;
			if(elem._length === elem.value.length) return;
			elem._length = elem.value.length;
			if(!isFirefox && !isOpera){
				padding = parseInt(getStyle('padding Top')) + 
				parseInt(getStyle('paddingBottom'));				
			};
			scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
			elem.style.height = minHeight +'px';
			if(elem.scrollHeight>minHeight){
				if(maxHeight && elem.scrollHeight>maxHeight){
					height = maxHeight - padding;
					style.overflowY = 'auto';
				}else{
					height = elem.scrollHeight-padding;
					style.overflowY='hidden';
				}
				style.height = height+extra +'px';
				scrollTop +=parseInt(style.height) - elem.currHeight;
				document.body.scrollTop = scrollTop;
				document.documentElement.scrollTop = scrollTop;
				elem.currHeight = parseInt(style.height);
			};
		};
		
		addEvent('propertychange',change);
		addEvent('input', change);
		addEvent('focus', change);
		change();
		
		
		
	};
	
	function check(this_tr){
		var flag=0;
		this_tr.find("textarea").each(function(){
			if(($(this).val()=="" || $(this).val()==null) && flag == 0){
				addErrInof("字段:"+$(this).attr("name")+"为空");
				$(this).css({'border-color':'red'});
				flag=1;
				return;
			}else{
				$(this).css({'border-color':'#ccc'});
			}
			
		});
		if(flag == 1){
			return-1;
		}
	}
	
	function addErrInof(errInfo){
		$("#projMgrTable").width()
		$("#errorInfo").text(errInfo);
		$("#errorInfo").css({'display':'block','margin-left':$("#projMgrTable").width()-200});
	}
	
	function removeErrInfo(){
		$("#errorInfo").text("");
		$("#errorInfo").css({'display':'none'});
	}
	
</script>																																												
</html>	    																																												

